<template>
  <Comment
    v-for="comment in comments"
    :key="comment.id"
    :datetime="stringToYMD(comment.create_at!)"
  >
    <template #actions>
      <TypographyText :type="comment.likes ? 'danger' : 'secondary'">
        <HeartOutlined />
        {{ comment.likes }}喜欢
      </TypographyText>
      <span key="browser">
        <UniversalText :text="parseBrowser(comment.agent!)" placeholder="未知浏览器" />
      </span>
      <span key="os">
        <UniversalText :text="parseOS(comment.agent!)" placeholder="未知系统" />
      </span>
      <span key="device">
        <UniversalText :text="parseDevice(comment.agent!)" placeholder="未知设备" />
      </span>
      <UniversalText key="ip" :text="comment.ip!" :copyable="true" :type="true" />
    </template>
    <template #author>
      <div>
        <a
          v-if="comment.author.site"
          :href="comment.author.site"
          :title="comment.author.site"
          target="_blank"
          rel="noreferrer"
        >
          {{ comment.author.name }}
        </a>
        <span>{{ comment.author.name }}</span>
        <Divider type="vertical" />
        <IPLocation key="ip-location" :data="comment.ip_location" />
        <Divider type="vertical" />
        <Tag :color="cs(comment.state).color">
          <template #icon>
            <component :is="cs(comment.state).icon" />
          </template>
          {{ cs(comment.state).name }}
        </Tag>
      </div>
    </template>
    <template #avatar>
      <CommentAvatar size="large" :comment="comment" />
    </template>
    <template #content>
      <TypographyParagraph>{{ comment.content }}</TypographyParagraph>
    </template>
    <Divider />
    <CommentTreeList :comments="comment.children || []" />
  </Comment>
</template>

<script setup lang="ts">
import { Comment, TypographyText, Divider, Tag, TypographyParagraph } from 'ant-design-vue'
import { stringToYMD } from '@/transformers/date'
import { HeartOutlined } from '@ant-design/icons-vue'
import { CommentTree } from '@/store/comment'
import UniversalText from '@/components/UniversalText/index.vue'
import IPLocation from '@/components/IPLocation/index.vue'
import CommentAvatar from '@/pages/comment/Avatar.vue'
import { parseBrowser, parseDevice, parseOS } from '@/transformers/ua'
import { cs } from '@/constants/comment'

defineProps({
  comments: {
    type: Array<CommentTree>,
  },
})
</script>

<style lang="less" scoped></style>
